<template>
  <view class="login">
    <view class="box1" @click="back">
      <uv-icon name="arrow-left" color="#000"></uv-icon>
      <view class="box11">账号登录</view>
    </view>
    <view class="userlogin">
      <view class="userlogin1">
        <uv-input placeholder="请输入您的账号" customStyle="border:none;padding: 2%;" @change="change1"></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input placeholder="请输入您的密码" customStyle="border:none;padding: 2%;" @change="change2"></uv-input>
      </view>
      <view class="determine">
        <uv-button type="primary" color="#008c8c" shape="circle" text="确定" @click="jump1"></uv-button>
      </view>
      <view class="all" @click="jump2">
        伴宠人员申请入驻
      </view>
    </view>
    <view class="bottom">
      <label class="radio">
        <radio value="" /><text>登录即表示阅读并同意</text>
      </label>
      <text style="color: #299d9d;">《用户协议》《及隐私协议》</text>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const back = (() => {
    uni.navigateBack({
      delta: 1, // 返回1个，如果是2，返回2个页面
    });
  })
  const change1 = ((e) => {
    console.log(e)
  })
  const change2 = ((e) => {
    console.log(e)
  })
  const jump1 = (() => {
    uni.navigateTo({
      url:'/pages/chongbanry/chongbanry'
    });
  })
  const jump2 = (() => {
    uni.navigateTo({
      url:'/pages/banchongryrz/banchongryrz'
    });
  })
</script>

<style lang="scss">
  .login {
    width: 100%;
    background: linear-gradient(to bottom, #e6f8f6, #fbfefd);
    height: 100vh;
    position: relative;

    .box1 {
      background-color: #e8f8f6;
      height: 90rpx;
      line-height: 90rpx;
      color: #000;
      text-align: center;
      display: flex;
      padding: 0 30rpx;
      margin-bottom: 30%;

      .box11 {
        width: 85%;
      }
    }

    // 用户登录 
    .userlogin {
      width: 90%;
      margin: auto;
      margin-top: 100rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 30rpx;
      padding: 3%;

      .userlogin1 {
        width: 100%;
        margin-top: 40rpx;
        border-radius: 100rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #fff;
        text-align: center;
        background-color: #f7f8fa;
      }

      .determine {
        margin-top: 100rpx;
      }

      .all {
        margin: 30rpx 0;
        text-align: center;
        font-size: 28rpx;
        color: #a7a7a7;
      }
    }

    // 
    .bottom {
      padding: 20rpx 20rpx 60rpx;
      font-size: 28rpx;
      box-sizing: border-box;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
  }
</style>